<!--
  产品溯源信息详情
 -->

<template>
  <div class="contents">
    <el-card v-if="!state" id="sowing" class="box-card">
      <div slot="header" class="clearfix">
        <span>产品信息 PRODUCT INFORMATION</span>
      </div>
      <el-col :span="6">
        <div class="zh-img-sty">
          <img class="zzimg" :src="'data:image/png;base64,' + batchBaseMessageList.picture" alt="" />
        </div>
      </el-col>
      <el-col :span="18">
        <p class="batch-title">{{ batchBaseMessageList.batchName }}</p>
        <p v-if="qualityimageList.length > 0" class="batclick">
          <el-button @click="batclick(artificialProductionBaseInfoNo, '#X')">点击查看检测报告</el-button>
        </p>
        <ul>
          <li>
            <span class="zh-lable">| 种养种类:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.plantingTypeName"
            />
          </li>
          <li>
            <span class="zh-lable">| 产品品种:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.varietyName"
            />
          </li>
          <li>
            <span class="zh-lable">| 批次名称:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.batchName"
            />
          </li>
          <li>
            <span class="zh-lable">| 批次号:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.batchNo"
            />
          </li>
          <li>
            <span class="zh-lable">| 总亩数:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.area+batchBaseMessageList.areaUnit"
            />
          </li>
        </ul>
      </el-col>
    </el-card>

    <!-- 主体信息 -->
    <transition name="el-zoom-in-top">
      <SubjectInformation
        :organization-list="batchFrom"
      />
    </transition>
    <transition name="el-zoom-in-top">
      <GrowingData :organization-list="batchFrom" />
    </transition>
    <!-- 通用图片弹出框 -->
    <el-dialog title="检测报告" :visible.sync="dialogliFormVisible">
      <!-- 检测报告 -->
      <!-- <div class="base-zh-title">检测报告</div> -->
      <div class="quality">
        <el-button
          class="prev"
          type="text"
          @click="prev()"
        ><i class="el-icon-arrow-left"></i></el-button>
        <el-carousel
          ref="litfix"
          :loop="true"
          arrow="never"
          :interval="4000"
          type="card"
          :autoplay="true"
          height="710px"
        >
          <el-carousel-item
            v-for="(item, index) in qualityimageList"
            :key="index"
          >
            <img :src="'data:image/png;base64,' + item.picture" class="zhimgl" />
          </el-carousel-item>
        </el-carousel>
        <el-button
          class="next"
          type="text"
          @click="next()"
        ><i class="el-icon-arrow-right"></i></el-button>
      </div>
      <!-- </div> -->
    </el-dialog>
  </div>
</template>
<script>
// import { getToken } from "@/utils/auth";
// import axios from "axios";
import SubjectInformation from "./components/subject-information.vue";
import batchreq from "@/api/trace-source-web/common-production/index";
import subjectApi from "@/api/basic-info-manage/subject-information-management.js";
import GrowingData from "./components/growing-data.vue";
import informationApi from "@/api/trace-source-web/manual-traceability-information-management/traceability-information-entry.js";
// import graApi from "@/api/trace-source-web/production-api/index-primary.js";
export default {
  components: {
    SubjectInformation,
    GrowingData
  },
  props: {
    batchFrom: {
      type: Object,
      default: () => ({})
    },
    batCode: {
      type: Number,
      default: 0
    },
    // imgurls: {
    //   type: String,
    //   default: () => ""
    // },
    state: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // ---头部批次信息---
      // topimgurl: "https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png",
      topimgurl: "",
      // 批次基础信息
      batchBaseMessageList: {
        batchName: "", // 批次名称
        plantingTypeName: "", // 种养种类
        mode: "", //
        varietyName: "", // 产品品种
        batchNo: "", // 批次号
        contact: "", // 负责人
        organizationName: "", // 主体名称.
        address: "", // 主体地址
        trace: {
          brand: "", // 品牌名
          productNumber: "", // 产品编号
          productGrade: "", // 产品等级
          originPlace: "", // 产地
          plantPlace: "", // 种养地址
          tracePictureId: "" // 顶部图片id
        }
      },
      qualityimageList: [],
      dialogliFormVisible: false,
      trace: {
        brand: "", // 品牌名
        productNumber: "", // 产品编号
        productGrade: "", // 产品等级
        originPlace: "", // 产地
        plantPlace: "", // 种养地址
        tracePictureId: "" // 顶部图片id
      },
      // 二维码数据
      downloadData: {
        url: "",
        icon: require("@/assets/trace-source-manage/yezi.png")
        // icon: 'https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png'
      },
      // ---农资投入---
      // 表格相关
      loading: true,
      agrisourcetabledata: [],
      agridialogAVisible: false,
      agrisourcepictureId: "",
      // 生长数据相关
      growthlist: [], // 生长记录可左右拖动图
      // 生长环境数据
      growthdatalist: [],
      current: 0,
      // uchart图数据相关
      // 生长记录数据uchart
      localdata: {},
      // 病虫害发生次数ucharts
      pestlocaldata: {},
      // ---
      // 圆形进度条 --药肥统计
      percentList: [
        // {
        //   name: "苄嘧丙草胺",
        //   value: 3200,
        //   color: "#82e5ff",
        //   unit: "%",
        //   zpercent: 32,
        //   assetQuantityMU: 1.25
        // }
      ],
      // 农事作业追溯
      farmworklist: [],
      // 表格 ---药肥统计
      yaofeiTableList: [],
      // imgurls: "https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png",
      imgurls: "",
      // 发生病害总次数列表
      rowblankList: [
        {
          name: "稻飞虱",
          value: 2, // 必须为数字
          unit: "次",
          allnum: 5, // 总数
          prence: "110",
          color: ""
        },
        // {
        //   name: "金龟子",
        //   value: 2, // 必须为数字
        //   unit: "次",
        //   allnum: 10, // 总数
        //   prence: "110",
        //   color: ""
        // },
        {
          name: "三化螟",
          value: 1, // 必须为数字
          unit: "次",
          allnum: 3, // 总数
          prence: "110",
          color: ""
        }
      ],
      // 检测报告
      currenttwo: 0,
      zhijianbaogoalist: [
        {
          url: require("@/assets/trace-source-manage/zhijianbaogao/zijian1.png")
        },
        {
          url: require("@/assets/trace-source-manage/zhijianbaogao/zijian2.png")
        }
      ],
      // 点击选择的图片-弹框展示
      selectedpicdata: "",
      // 批次id
      batchNo: "",
      // 数据库名称
      databaseName: "DB_TDW1_CXXC",
      // ---------
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 }
      ],
      dialogVisible: false,
      isActive: false,
      pictureId: "",
      dialogFormVisible: false,
      tableData: [],
      returnData: [],
      // 批次类型
      batchType: "PRODUCTION",
      // 主体信息轮播图
      zizhiimageList: [],
      growthPage: 1,
      artificialProductionBaseInfoNo: ''
    };
  },
  created() {},
  mounted() {
    let batchFrom = this.batchFrom;
    // console.log(batchFrom)
    setTimeout(() => {
      this.setbatchidmet(batchFrom);
    }, 200);
  },
  methods: {
    // 设置batchid
    setbatchidmet(val) {
      this.batchNo = val.artificialOrganizationId;
      this.batchNo = val.batchNo;
      this.artificialProductionBaseInfoNo = val.artificialProductionBaseInfoNo
      if (val.pictureId) {
        this.pictureId = val.pictureId;
      }
      this.getbatchinfo();
      this.batclick(val.artificialProductionBaseInfoNo, '')
    },
    async feignInfoData(id) {
      // let pictureData = ''
      const { data: res } = await batchreq.feignInfo(id);
      return res.pictureData;
    },
    // 获取批次信息
    getbatchinfo() {
      informationApi.artificialProductionBaseId(this.artificialProductionBaseInfoNo).then(res => {
        this.batchBaseMessageList = res.data;
        let artificialProductionPicture = this.batchBaseMessageList.artificialProductionPicture
        this.$set(this.batchBaseMessageList, 'picture', artificialProductionPicture.picture)
        this.organizationInfoId = res.data.organizationInfoId;
      });
    },
    // 获取图片
    batclick(e, x) {
      if (this.qualityimageList.length > 0 && x === "#X") {
        this.dialogliFormVisible = true;
      }
      if (e && x === "") {
        subjectApi.artificialProductPictureQuery(e).then(res => {
          this.qualityimageList = res.data || [];
        });
      }
    },
    // // 通过生长图片id获取图片信息
    // getgrowpicture(id) {
    //   if (id) {
    //     let zhrequrl =
    //       this.$webReqUrl + "traceSource/collectPicture/query/" + id;
    //     return new Promise(resove => {
    //       axios({
    //         url: zhrequrl,
    //         method: "GET",
    //         headers: {
    //           databaseName: this.databaseName,
    //           accessToken: getToken("token")
    //         }
    //       }).then(res => {
    //         if (res.data.data) {
    //           let zhpicdata = "data:image/png;base64," + res.data.data.picture;
    //           resove(zhpicdata);
    //         } else {
    //           let zhpicdata = require("@/assets/trace-source-manage/daogu.png");
    //           resove(zhpicdata);
    //         }
    //       });
    //     });
    //   }
    // },

    // 主体信息
    // ----------
    imgUrl(e) {
      // console.log(e)
      this.selectedpicdata = e;
      this.dialogFormVisible = true;
    },
    search() {},
    ret() {
      this.nowpage === 2;
      // this.$router.go(-1);
    },
    // 跑马灯左右切换
    prev() {
      this.$refs.litfix.prev();
    },
    next() {
      this.$refs.litfix.next();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
// 头部信息颜色
.contents {
  ::v-deep .el-card {
    .el-card__header {
      color: rgba(130, 229, 255, 1);
    }
  }
}
.el-card {
  width: 100%;
  background-color: rgba(34, 87, 104, 1);
  color: #fff;
  margin-bottom: 40px;
  border: 0px solid rgba($color: #fff, $alpha: 0.3);
  ::v-deep .el-card__header {
    color: #64b9d1;
    font-size: 16px;
    border-bottom: 1px solid rgba($color: #64b9d1, $alpha: 0.9);
  }
}
.button {
  position: absolute;
  top: 5px;
  right: 10px;
  background-color: rgba($color: #000000, $alpha: 0);
  color: #fffff0;
  border: none;
}
.batch-title {
  margin-top: 60px;
  margin-bottom: 10px;
  font-size: 24px;
  color: rgba(130, 229, 255, 1);
}
.zh-lable {
  width: 80px;
  white-space: nowrap;
  font-size: 16px;
}
.step {
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  .el-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    .stepBtn {
      background-color: rgba($color: #000000, $alpha: 0);
      // color:#fff;
      // ::v-deep i {
      //   color: #FFF;
      // }
    }
    .right {
      position: absolute;
      right: -36%;
      /* transform: translate(-40%, -50%); */
      top: 34%;
      width: 73%;
      height: 2px;
      background-color: #fffff085;
      i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #fffff0;
      }
    }
  }
}
#sowing {
  min-height: 250px;
  width: 100%;
  ::v-deep .el-card__body {
    padding: 0;
    min-height: 200px;
  }
  .el-col {
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    position: relative;
    .zh-img-sty {
      width: 100%;
      height: 280px;
      // background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .zzimg {
        margin: 0 auto;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        box-sizing: content-box;
        border: 15px solid rgba($color: rgba(15, 70, 86, 1), $alpha: 1);
      }
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 0;
      li {
        display: flex;
        list-style-type: none;
        margin: 0;
        width: 33%;
        line-height: 60px;
        .el-input {
          margin-left: 10px;
          width: 60%;
          ::v-deep .el-input__inner {
            border: 0;
            height: 25px;
            background-color: rgba($color: #0e4352, $alpha: 1);
            border-radius: 40px;
            text-align: center;
          }
        }
      }
    }
  }
  .sowing-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 57, 71, 0.55);
    height: 280px;
    img {
      margin-left: 0;
      margin-right: 0px;
      width: 110px;
      height: 110px;
      margin-top: 20px;
      margin-bottom: 5px;
      border-radius: 0;
      border: 0;
      box-shadow: 1px 1px 6px #000000;
    }
    .sowing-right-line-one {
      margin-top: 20px;
      font-size: 18px;
      letter-spacing: 3px;
      width: 100%;
      text-align: center;
    }
    .sowing-right-line-two {
      margin-top: 5px;
      font-size: 18px;
      width: 90px;
      height: 50px;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 20px;
      font-weight: 600;
      text-align: center;
    }
  }
}

.zh-right-echart {
  ::v-deep .chart {
    margin: 0 auto !important;
    width: 1100px !important;
    height: 300px !important;
    > div:first-child {
      height: 300px !important;
      canvas {
        height: 300px !important;
      }
    }
  }
}
.zh-box-table {
  ::v-deep .chart {
    margin: 0 auto !important;
    width: 1450px !important;
    height: 280px !important;
    > div:first-child {
      // width: 1400px !important;
      height: 280px !important;
      canvas {
        width: 1450px !important;
        height: 280px !important;
      }
    }
  }
}
.imgl {
  margin: 0 40px;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  .imgdet {
    border-radius: 0;
    .shadows {
      margin: 2px !important;
      box-sizing: content-box;
      position: relative;
      .shadowx {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 20, 26, 0.71);
      }
      .shadowBut {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
      }
    }
    .shadows:hover {
      border: 1px solid rgba(255, 255, 255, 0.54);
      .shadowBut {
        display: block;
      }
      .shadowx {
        display: block;
      }
    }
    img {
      border: none !important;
      border-radius: 0 !important;
      width: 280px !important;
      height: 200px !important;
    }
    .text {
      text-align: center;
    }
  }
}
// 检测报告
.quality {
  width: 100%;
  height: 100%;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  .el-carousel {
    width: 90%;
    .zhimgl {
      transform: scale(0.8);
      height: 68vh;
    }
    ::v-deep .el-carousel__mask {
      background-color: #00000000;
    }
  }
}
.batclick {
  position: absolute;
  right: 7%;
  top: 86%;
  .el-button {
    border-radius: 15px;
    height: 30px;
    line-height: 9px;
    background-color: #007795;
    color: #fffff0;
    border-color: #007795;
  }
  .el-button:hover {
    color: #01fde0;
    border-color: #01fde0;
  }
}
// // 解决行无法铺满整个表格
// ::v-deep .el-table__body{
//   height:auto !important;
// }\

.next {
  padding-bottom: 30px;
  i {
    font-size: 80px;
    color: #bcbcbc;
  }
}
.prev {
  padding-bottom: 30px;
  i {
    font-size: 80px;
    color: #bcbcbc;
  }
}

.prev:hover,
.next:hover {
  i {
    color: #409eff;
  }
}
// 弹出框图片
::v-deep .el-dialog {
  .el-dialog__headerbtn {
    position: absolute;
    top: 5px;
    right: 10px;
  }
  .el-dialog__body {
    padding: 5px 5px;
  }
  img {
    width: 100%;
  }
}
::v-deep .zhcontent {
  .content {
    height: calc(100% - 15px) !important;
  }
}
#vue-qr {
  border: 1px solid transparent;
  p {
    text-align: center;
  }
}
.sowing-ones {
  text-align: center;
}
.ones {
  display: none;
}
</style>
